<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            letter-spacing: 3px;
        }

        body {
            background-color: #ffbf84;
        }

        /* 立即登录按钮和模态框水平垂直居中 */
        .but, .login-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* 遮罩层 */
        .shade {
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .3);
            /* 这里一定要把遮罩层移到重叠元素的上层，就可以造成父窗口无法操作的效果 */
            z-index: 1;
        }

        /* 立即登录按钮 */
        .but {
            cursor: pointer;
            display: block;
            width: 200px;
            height: 60px;
            border-radius: 30px;
            box-shadow: 0 10px 10px rgba(10, 20, 20, .2);
            background-color: #fa8282;
            color: #fff;
            font-size: 25px;
            text-align: center;
            line-height: 60px;
        }

        .but:hover {
            transition: background-color 0.5s;
            background-color: #f36886;
        }

        /* 模态框 */
        .login-box {
            display: none;
            width: 350px;
            height: 250px;
            border: 1px solid rgb(216, 216, 216);
            border-radius: 10px;
            box-shadow: 5px 5px 10px rgba(10, 20, 20, .2), -5px -5px 10px rgba(10, 20, 20, .2);
            background-color: #fff;
            /* 和遮罩层同理，模态框一定要在最上层 */
            z-index: 1;
        }

        .login-box .title {
            cursor: move;
            user-select: none; /* 禁止用户选中文字 */
            position: relative;
            width: 100%;
            height: 70px;
            color: #3f3f3f;
            font-size: 20px;
            font-weight: 700;
            text-align: center;
            line-height: 70px;
        }

        .login-box .title .exit {
            position: absolute;
            top: -10px;
            right: 10px;
            font-size: 30px;
        }

        .login-box .title .exit:hover {
            cursor: pointer;
            text-shadow: 2px 2px 4px rgba(10, 20, 20, .5);
        }

        .login-box form {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px 0;
        }

        .login-box form .input-box {
            width: 60%;
            height: 35px;
            margin-bottom: 20px;
            padding: 0px 10px;
            border: 1px solid #3f3f3f;
            border-radius: 8px;
            color: #3f3f3f;
            font-size: 16px;
            font-weight: 700;
        }

        .login-box form .input-box:focus {
            outline: none;
        }

        .login-box form .login-but {
            width: 120px;
            height: 35px;
            border: none;
            background-color: #fa8282;
            border-radius: 8px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }

        .login-box form .login-but:hover {
            background-color: #f36886;
        }
    </style>
</head>
<body>
<!-- 遮罩层 -->
<div class="shade"></div>
<!-- 登录按钮 -->
<span class="but">立即登录</span>
<!-- 模态框 -->
<div class="login-box">
    <div class="title">
        用户登录
        <span class="exit">×</span>
    </div>
    <form action="">
        <input type="text" class="input-box" placeholder="用户名">
        <input type="password" class="input-box" placeholder="密码">
        <input type="submit" class="login-but" value="登录">
    </form>
</div>
<script>
    let but = document.querySelector('.but');
    let shade = document.querySelector('.shade');
    let loginBox = document.querySelector('.login-box');
    let title = document.querySelector('.title');
    let exit = document.querySelector('.exit');

    // 立即登录按钮点击事件
    but.addEventListener('click', function () {
        shade.style.display = "block";
        loginBox.style.display = "block";
    });

    // 关闭模态框事件
    exit.addEventListener('click', function () {
        shade.style.display = "none";
        loginBox.style.display = "none";
    });

    // 拖动标题区域可移动模态框
    title.addEventListener('mousedown', function (event) {
        // 计算鼠标在登录框中坐标
        let x = event.pageX - loginBox.offsetLeft;
        let y = event.pageY - loginBox.offsetTop;
        // 给页面添加鼠标移动事件
        document.addEventListener('mousemove', loginBoxMove);

        function loginBoxMove(event) {
            loginBox.style.left = (event.pageX - x) + "px";
            loginBox.style.top = (event.pageY - y) + "px";
        }

        // 鼠标松开后移除页面的鼠标移动事件
        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', loginBoxMove);
        })
    });
</script>
</body>
</html>